require(['./config'], () => {
  require(['template', 'header', 'fly', 'zoom'], (template, header) => {
    class Detail {
      constructor () {
        this.init().then(() => {
          this.addToCart()
          this.zoom()
        })
      }
      init () {
        const id = Number(window.location.search.slice(4))
        return new Promise((resolve, reject) => {
          // 根据id请求后端接口拿到当前商品的详情数据
          $.get('http://rap2api.taobao.org/app/mock/239693/detail', { id }, resp => {
            console.log(resp)
            if (resp.code === 200) {
              const { detail } = resp.body
              // 由于rap2接口没有返回id，所以需要手动设置一下，将来换成真实接口的时候就不需要了
              // 把detail展开，把id写进去，最后构成一个新的对象赋值给this.detail
              this.detail = { ...detail, id }
              // 渲染详情页
              // 把detail展开，所有属性全部传递进去
              $('#design').html(template('detailTemplate', { ...this.detail }))
              // 代表异步成功，承诺兑现
              resolve()
            }
          })
        })
        
      }
      addToCart () {
        // 加入购物车
        $('#add-to-cart-btn').on('click', (e) => {
          this.fly(e)
          // 把当前详情数据加入到购物车里
          // localStorage

          // 1、先把购物车数据取出来
          let cart = window.localStorage.getItem('cart')
          // 2、判断cart是否有数据
          if (cart) {
            // 购物车里已经有数据了
            cart = JSON.parse(cart)
            // 判断当前商品是否已经存在在购物车里了
            // 找cart里是否存在一件商品的id跟当前this.detail.id是相等的
            const isExist = cart.some(shop => {
              return shop.id === this.detail.id
            })
            console.log(isExist)
            if (isExist) {
              // 代表当前商品在购物车里已存在
              // 只需要把当前商品的count属性+1就行了
              cart = cart.map(shop => {
                if (shop.id === this.detail.id) {
                  shop.count++
                }
                return shop
              })
            } else {
              // 商品不存在
              // push当前商品
              cart.push({ ...this.detail, count: 1, check: true })
            }
            // 无论if还是else，都要把数组cart重新存localStorage把之前的覆盖掉
            window.localStorage.setItem('cart', JSON.stringify(cart))
          } else {
            // 代表购物车为空
            // 就把当前商品放到一个数组里，存进去
            window.localStorage.setItem('cart', JSON.stringify([{ ...this.detail, count: 1, check: true }]))

            // 上面那一句代码相当于下面这两句
            // const arr = [
            //   { ...this.detail, count: 1 }
            // ]
            // window.localStorage.setItem('cart', JSON.stringify(arr))
          }
          // 更新页面上显示的购物车数量
          // 在这里接收到了header模块return出来的实例，可以直接调用方法
          // 注意：这个方法的调用一定要在localStorage.setItem之后
          header.calcCartCount()
        })
      }
      fly (e) {
        $(`<img style="width: 40px; height: 40px; border-radius: 50%;" src="${this.detail.imgs[0]}">`).fly({
          start:{
            left: e.clientX,  //开始位置（必填）#fly元素会被设置成position: fixed
            top: e.clientY,  //开始位置（必填）
          },
          end:{
            left: $('#cart').offset().left, //结束位置（必填）
            top: $('#cart').offset().top,  //结束位置（必填）
            // width: 100, //结束时高度
            // height: 100, //结束时高度
          },
          // autoPlay: false, //是否直接运动,默认true
          speed: 1.1, //越大越快，默认1.2
          vertex_Rtop: 100, //运动轨迹最高点top值，默认20
          onEnd: function(){
            console.log('end')
            // 移出DOM
            this.destroy()
          } //结束回调
        })
      }
      zoom () {
        $('.zoom-image').elevateZoom({
          // 指定小图容器盒子的id，不加#
          gallery: 'gal1'
        })
      }
    }
    new Detail()
  })
})